<template>
    <!-- col-11 -->
    <div class="row">
        <div class="col-1 d-flex justify-content-end">
            <strong>效率模式</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="effectModel" id="effectModel"
           v-model="optfastConsole.effectMode.enableEffectModel"
           @change="OptfastClickToSave({effectMode:{enableEffectModel:optfastConsole.effectMode.enableEffectModel}})"
            >
            <label class="form-check-label" for="effectModel">
                开启效率模式
            </label>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            浏览器将通过合理调配电脑资源来提高低配电脑的性能体验
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>优化内存</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableDiscard" id="enableDiscard"
             v-model="optfastConsole.optMemory.enableDisCard"
           @change="OptfastClickToSave({optMemory:{enableDisCard:optfastConsole.optMemory.enableDisCard}})"
            >
            <label class="form-check-label" for="enableDiscard">
                当内存占用太多的时候，自动释放后台标签
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableReduceMemory" id="enableReduceMemory"
            v-model="optfastConsole.optMemory.enableReduceMemory"
           @change="OptfastClickToSave({optMemory:{enableReduceMemory:optfastConsole.optMemory.enableReduceMemory}})"
            >
            <label class="form-label" for="enableReduceMemory">
                当内存占用太多的时候，提醒我清理
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>优化缓存</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableReduceCache" id="enableReduceCache"
             v-model="optfastConsole.optCache.enableReduceCache"
           @change="OptfastClickToSave({optCache:{enableReduceCache:optfastConsole.optCache.enableReduceCache}})"
            >
            <label class="form-check-label" for="enableReduceCache">
                当缓存占用过多磁盘空间时，提醒我清理
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>网页预读</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enablePrepareBefore" id="enablePrepareBefore"
             v-model="optfastConsole.prepareBefore.enablePrepareBefore"
           @change="OptfastClickToSave({prepareBefore:{enablePrepareBefore:optfastConsole.prepareBefore.enablePrepareBefore}})"
            >
            <label class="form-check-label" for="enablePrepareBefore">
                提前加载可能会访问的页面，提高网页打开速度
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>网页加速</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableSubReSource" id="enableSubReSource"
             v-model="optfastConsole.pageSpeed.enableSubReSource"
           @change="OptfastClickToSave({pageSpeed:{enableSubReSource:optfastConsole.pageSpeed.enableSubReSource}})"
            
            >
            <label class="form-check-label" for="enableSubReSource">
                利用360资源解决一些网页资源不能正常加载的问题
            </label>
        </div>
    </div>


</template>

<style>
.IDS_MORE_SETTING_BOOKMARK_MENU_MIN_WIDTH {
    box-sizing: border-box;
    font: inherit;
    padding: 4px;
    color: #444;
    border: 1px solid #e5e5e5;
    width: 50px;
    height: 24px;
}
</style>

<style scoped>
.form-check-input {
    margin-right: 8px;
    /* 在 input 右侧添加 8px 的边距 */
}

.form-input {
    margin-right: 8px;
    /* 在 input 右侧添加 8px 的边距 */
}
</style>


<script setup lang="ts">
import { useOptfastStore } from '@/store/console/optfast'; 
import { showSaveMsg } from '@/utils/message'

import * as optfastApi from '@/api/console/optfastConsole'
const optfastStore = useOptfastStore()

const { optfastConsoleState:optfastConsole } = storeToRefs(optfastStore)
optfastApi.getOptfastConsole().then(
    (res) => optfastStore.updateLabConsole(res as unknown as OptfastConsoleApiModel)
);
function OptfastClickToSave(param: OptfastConsoleApiModel) {
    optfastApi.updateOptfastConsole(param)
    showSaveMsg()
}
</script>



<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { OptfastConsoleApiModel } from '@/type/console/optfastConsole';


export default defineComponent({
    name: 'OptFastConsole',

});

</script>